<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>上传信息</title>

		<link href="css/admin.css" rel="stylesheet" type="text/css">
		<link href="css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="css/personal.css" rel="stylesheet" type="text/css">
		<link href="css/refstyle.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="js/common.js"></script>
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/amazeui.js" type="text/javascript"></script>
	</head>
<body>
	<!-------------------------------------- 头部开始 -------------------------------------->
<div id="app">	
<top></top>
<bar></bar>
<b class="line"></b>
<!-------------------------------------- 头部结束 -------------------------------------->

<!-------------------------------------- 内容开始 -------------------------------------->

		<div class="center">
			<div class="col-main">
				<div class="main-wrap">
<!--------------------------------------标题开始 -------------------------------------->
					<div class="am-cf am-padding">
						<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">上传信息</strong> / <small>Upload information </small></div>
					</div>
					
					<hr>
					
					
<!--------------------------------------左侧信息开始 -------------------------------------->
						<div class="refund-aside">
						
<!--------------------------------------图片纯属美观（固定） -------------------------------------->
							<div class="item-pic">
								<a href="#" class="J_MakePoint">
									<img src="images/receive.png" class="itempic">
								</a>
							</div>
<!--------------------------------------地址，客户名，电话，维修人员 -------------------------------------->
							<div class="item-title">

								<div class="item-name">
									<a href="#">
										<p class="item-basic-info">地址：</p>
										<p class="item-basic-info">从数据库调取地址，为测试地址长度会不会超出边框以下文字为废话</p>
									</a>
								</div>
								<div class="info-little">
                                    <span>客户名称：从数据库调取</span>
								    <br>
								    <span>客户电话：从数据库调取</span>
								    <br>
									<span>维修人员：无敌小王八</span>
									<br>
									
								</div>
							</div>
<!--------------------------------------订单编号，材料费，人工费，总计，开始时间，结束时间 -------------------------------------->
							<div class="item-info">
								<div class="item-ordernumber">
									<span class="info-title">订单编号：</span><a>1474784641639947</a>
								</div>
								<div class="item-amount">
									<span class="info-title">材&nbsp;&nbsp;&nbsp;料&nbsp;&nbsp;&nbsp;费：</span><span class="amount">19.88元</span>
								</div>
								<div class="item-pay-logis">
									<span class="info-title">人&nbsp;&nbsp;&nbsp;工&nbsp;&nbsp;&nbsp;费：</span><span class="price">10.00元</span>
								</div>
								<div class="item-amountall">
									<span class="info-title">总&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计：</span><span class="amountall">29.88元</span>
								</div>
								<div class="item-time">
									<span class="info-title">开始时间：</span><span class="time">下单时间精确到分</span>
								</div>
								<div class="item-time">
									<span class="info-title">完成时间：</span><span class="time">当前时间精确到分</span>
								</div>

							</div>
							<div class="clear"></div>
						</div>
						
<!--------------------------------------左侧信息结束 右侧信息开始-------------------------------------->
						<div class="refund-main">
							<div class="item-comment">
								<div class="am-form-group">
									<label for="refund-type" class="am-form-label">维修进度</label>
									<div class="am-form-content">
										<select>
											<option value="a" selected>已完成</option>
											<option value="b">返修</option>
										</select>
									</div>
								</div>
								
								
								<div class="am-form-group">
									<label for="refund-reason" class="am-form-label">故障类型</label>
									<div class="am-form-content">
										<select>
											<option value="a" selected>请选择故障类型</option>
											<option value="b">水管炸了</option>
											<option value="c">客户炸了</option>
											<option value="d">客厅炸了</option>											
											<option value="e">房子炸了</option>
										</select>
									</div>
								</div>
								
								
								
								<div class="am-form-group">
									<label for="refund-reason" class="am-form-label">耗材消耗</label>
									<div class="am-form-content">
										<select>
											<option value="a" selected>请选择耗材类型</option>
											<option value="b">水管炸了</option>
											<option value="c">客户炸了</option>
											<option value="d">客厅炸了</option>											
											<option value="e">房子炸了</option>
										</select>
										
										&nbsp;&nbsp;&nbsp;
										
										<select>
											<option value="a" selected>请选择耗材明细</option>
											<option value="b">水管炸了</option>
											<option value="c">客户炸了</option>
											<option value="d">客厅炸了</option>											
											<option value="e">房子炸了</option>
											
										</select>
<!--------------------------------------这里还有一个耗材数量-------------------------------------->
										&nbsp;&nbsp;&nbsp;
											<input type="tel" id="user-code" placeholder="耗材数量"style="width: 100px;">
										&nbsp;&nbsp;&nbsp;
										
										
											<button type="button" class="am-btn am-btn-danger" >添加</button>	
									</div>
								</div>
							</div>
							
							<br>
							<br>
							<br>
							<br>
							<br>
<!--------------------------------------上传照片，提交信息-------------------------------------->
                            
							<div class="refund-tip">
								<div class="filePic">
									<input type="file" class="inputPic" value="选择凭证图片" name="file" max="5" maxsize="5120" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
									<img src="images/image.jpg" alt="">
								</div>
								<span class="desc">上传凭证&nbsp;最多三张</span>
							</div>
							<div class="info-btn">
								<div class="am-btn am-btn-danger">提交信息</div>
							</div>
						</div>
					</div>
<!--------------------------------------右侧信息结束-------------------------------------->
<!-------------------------------------- 内容结束 -------------------------------------->
<!-------------------------------------- 尾部开始 -------------------------------------->
<end></end>
</div>
<!-------------------------------------- 尾部结束 -------------------------------------->
			
<!-------------------------------------- 侧边导航栏开始 -------------------------------------->
        							
			<aside class="menu">
				<ul>
					<li class="person">
						<a href="index.html"><font size="5px">个人中心</font></a>
					</li>
					<li class="person">
						<ul>
							<li> <a href="Phone.html">电话修改</a></li>
							<li>  <a href="bonus.html">安全设置</a></li>
						</ul>
					</li>
				    <li class="person">
						<a href="Snatching.html"><font size="5px">抢单</font></a>
						
					</li>
					<li class="person">
						<a><font size="5px">当前订单</font></a>
						<ul>
							<li><a href="news.html">订单信息</a></li>
							<li> <a href="buass.html">信息确定</a></li>
							<li> <a href="affirm.html">确定上门</a></li>
							<li  class="active"> <a href="refund.html">上传信息</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="billist.html"><font size="5px">全部订单</font></a>
						<ul>
							<li> <a href="accomplish.html">已完成 </a></li>
							<li> <a href="rough.html">未完成</a></li>
							<li> <a href="assess.html">待评价</a></li>
						</ul>
					</li>

					<li class="person">
						<a><font size="5px">系统设置</font></a>
						<ul>
							
							<li> <a href="#">主题</a></li>
							<li> <a href="#">设置</a></li>
						</ul>
					</li>

				</ul>
			</aside>
			</div>
        </div>
        
<!-------------------------------------- 侧边导航栏结束 -------------------------------------->
	</body>
</html>



<script>

var app = new Vue({
    el:"#app",
    data:{
        admin:{},
        message:''
    },
 
});
</script>